<template>
    <div class="head-img-body" :style="{'width': width, 'height': height}">
        <img class="head-img" :src="headImgUrl" :width="width" :height="height">
        <img class="title-img" v-show="titleUrl" :src="appUrl + titleUrl">
    </div>
</template>

<script>
export default {
    name: 'HeadImg',
    props: {
        headImgUrl: { //头像图片URL
            type: String,
            default: null
        },
        userEntId: { //用户entId
            type: Number,
            default: null
        },
        titleImgUrl: { //头衔图片Url
            type: String,
            default: null
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '100%'
        }
    },
    watch: {
        userEntId() {
            if (!this.titleImgUrl && this.userEntId) {
                this.getHeadTitleImgUrlByUserEntId();
            }
        }
    },
    created() {
        if (!this.titleImgUrl && this.userEntId) {
            this.getHeadTitleImgUrlByUserEntId();
        }
    },
    data() {
        return {
            titleUrl: null
        };
    },
    methods: {
        //获取用户头衔数据
        getHeadTitleImgUrlByUserEntId() {
            this.$axios.get(`/app/head-title/user/${this.userEntId}`).then(res => {
                if (res.data && res.data.headTitleIcon) {
                    this.titleUrl = res.data.headTitleIcon;
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
    .head-img-body {
        position: relative;
        .head-img {
            border-radius: 50%;
            border: 1px #fff solid;
        }
        .title-img {
            position: absolute;
            /*right: 0;*/
            /*bottom: 0;*/
            left: 0;
            top: 0;
            width: 30%;
            height: 30%;
        }
    }
</style>
